
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no" />

    <title></title>
    <!--<script type="text/javascript">
			window.onload = function(){
			size=document.body.clientWidth/30;
			document.getElementsByTagName("html")[0].style.fontSize = size+"px";
			
			var canvas = document.getElementById("canvas");
			canvas.width = document.body.clientWidth;
			canvas.height = document.body.clientHeight;
			
			var snow_x = new Array();
			var snow_y = new Array();
			var fontSizes = new Array();
			for(var i = 0 ; i < 100 ; i++){
				snow_x[i] = Math.random()*canvas.width;
				snow_y[i] = -1*Math.random()*canvas.height;
				fontSizes[i] = Math.random()*30+2;
			}
			
			//获取context2d
			var context = canvas.getContext("2d");
			context.fillStyle = "#FFFFFF";
			//setInterval可以定时执行操作
			var speedy = 10;
			var speedx = 5;
			setInterval(function(){
				context.clearRect(0,0,canvas.width,canvas.height);
				for(var i = 0 ; i < 100 ; i++){
					snow_y[i] = snow_y[i] + speedy ;
					if(snow_y[i]>canvas.height){
						snow_y[i] = -1*Math.random()*canvas.height;
					} 
					context.font = fontSizes[i]+"px arial";
					context.fillText("#*",snow_x[i],snow_y[i]);
				}
			},50);
			
			//添加事件
			var dl = document.getElementById("denglong");
			
			var player = document.getElementById("player");
			dl.addEventListener("touchstart",function(){
				if(player.paused){
					player.play();
				}else{
					player.pause();
				}
			},false);
    	}
    </script>-->

	<style type="text/css">
    	*{
    		margin: 0;
    		padding: 0;
    		border: none;
    	}
    	html,body{
    		height: 100%;
    		width: 100%;
    	}
    	.p{
    		background:url(img/婚.jpg);
    		width:100%;
    		height: 140%;
    		background-size: contain;
    		
    		}

    		#hua{ 
    		    background:url(img/福.gif);
    			width: 100%;
    			height: 45.121137206427689rem;
    			position: absolute;
    			background-size: contain;
    			top: 25rem;
    			left: 0rem;
    			background-repeat: no-repeat;
    		    /*animation: h1 2s linear infinite;
    			-webkit-animation: h1 2s linear infinite;*/
    		}
    		@-webkit-keyframes h1{
    				0%{
    					transform: scale(1);
    				}
    				50%{
    					transform: scale(1.5);
    				}
    				100%{
    					transform: scale(1);
    				}
    			}
    			@keyframes h1{
    				0%{
    					transform: scale(1);
    				}
    				50%{
    					transform: scale(1.5);
    				}
    				100%{
    					transform: scale(1);
    				}
    			}
    		.z1{
    			background: url(img/动.gif);
    			width: 10.75rem;
    			height:30.139678615574784rem ;
    			position: absolute;
    			background-size: contain;
    			left: 39rem;
    			top:10rem;
    			background-repeat: no-repeat;
    			animation: m1 2s linear infinite;
    			-webkit-animation: m1 2s linear infinite;
    			}
    			@-webkit-keyframes m1{
    				0%{
    					transform: scale(1);
    				}
    				50%{
    					transform: scale(1.5);
    				}
    				100%{
    					transform: scale(1);
    				}
    			}
    			@keyframes m1{
    				0%{
    					transform: scale(1);
    				}
    				50%{
    					transform: scale(1.5);
    				}
    				100%{
    					transform: scale(1);
    				}
    			}
    			.z2{
    				background: url(img2/伴.jpg);
    				width:70.515822784810127rem;
    				height:9.101359703337454rem;
    				position: absolute;
    				background-size: contain;
    				left: 4rem;
    				top: 36rem;
    				background-repeat: no-repeat;
    				/*animation: m2 2s linear infinite;
    			-webkit-animation: m2 2s linear infinite;*/
    				
    			}
    			@-webkit-keyframes m2{
    				0%{
    					transform: scale(1.5);
    				}
    				50%{
    					transform: scale(1);
    				}
    				100%{
    					transform: scale(1.5);
    				}
    			}
    			@keyframes m2{
    				0%{
    					transform: scale(1.5);
    				}
    				50%{
    					transform: scale(1);
    				}
    				100%{
    					transform: scale(1.5);
    				}
    			}
    			/*.z3{
    				background: url(img/kuaii.jpg);
    				width: 2.120253164556962rem;
    				height: 2.891223733003708rem;
    				position: absolute;
    				background-size: contain;
    				left: 1rem;
    				top: 15.5rem;
    				background-repeat: no-repeat;
    				animation: m3 2s linear infinite;
    			-webkit-animation: m3 2s linear infinite;
    			}
    			@-webkit-keyframes m3{
    				0%{
    					transform: scale(0.5);
    				}
    				50%{
    					transform: scale(1);
    				}
    				100%{
    					transform: scale(0.5);
    				}
    			}
    			@keyframes m3{
    				0%{
    					transform: scale(1);
    				}
    				50%{
    					transform: scale(0.5);
    				}
    				100%{
    					transform: scale(1);
    				}
    			}*/
    			.z4{
    				background: url(img2/pic_5tu_big_201611152113285195_0001s_0006_图层-4-副本.png);
    				width: 33.417721518987342rem;
    				height:33.017305315203956rem;
    				position: absolute;
    				background-size: contain;
    				left:0rem;
    				top: 0rem;
    				background-repeat: no-repeat;
    				animation: m4 2s linear infinite;
    			-webkit-animation: m4 2s linear infinite;
    				}
    				@-webkit-keyframes m4{
    				0%{
    					transform: scale(0.5);
    				}
    				50%{
    					transform: scale(1);
    				}
    				100%{
    					transform: scale(0.5);
    				}
    			}
    			@keyframes m4{
    				0%{
    					transform: scale(1);
    				}
    				50%{
    					transform: scale(0.5);
    				}
    				100%{
    					transform: scale(1);
    				}
    			}
    		
    				.z10{
    					background:url(img/永浴爱河.jpg);
    					width: 13.00632911392405rem;
    				height:35.6761433868974rem;
    				position: absolute;
    				background-size: contain;
    				bottom: 0;
    				top: 0rem;
    				left: 35rem;
    				
    				margin: auto;
    				background-repeat: no-repeat;
    				animation: m4 2s linear infinite;
    			-webkit-animation: m4 2s linear infinite;
    				}
    					@-webkit-keyframes m4{
    				0%{
    					transform: scale(0.5);
    				}
    				50%{
    					transform: scale(1);
    				}
    				100%{
    					transform: scale(0.5);
    				}
    			}
    			@keyframes m4{
    				0%{
    					transform: scale(1);
    				}
    				50%{
    					transform: scale(0.5);
    				}
    				100%{
    					transform: scale(1);
    				}
    				</style>
	</head>
	<body>
		<a href="index.html">
		<div id="p" class="p">
		<canvas id="zuo" class="zuo"></canvas>
		<audio id="player" class="player" src="static/吴樾、安又琪 - 小两口.mp3" autoplay="autoplay" loop="loop"></audio>
	<div id="hua"></div>
	
		</a>
	</body>
</html>
